<template>
	<div class="quality">
		<div class="classIndex_h quality-link">
			<span>综合素质评价</span>
			<router-link  class="fade-router" v-if="$store.getters.userInfo.is_headmaster == 1" :to="{path: '/class/quality/manage', query: {id: path}}">评价管理</router-link>
		</div>

		<div class="quality-route">
			<!-- 班主任 -->
			<template v-if="$store.getters.userInfo.is_headmaster == 1">
				<router-link  class="fade-router" :to="{path: '/class/quality/index', query: {id: path}}">班级画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/details', query: {id: path}}">班级详情</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/students', query: {id: path}}">评价学生</router-link>
			</template>
			
			<!-- 学生 -->
			<template v-else-if="roleBaseid(4)">
				<router-link  class="fade-router" :to="{path: '/class/quality/index', query: {id: path}}">班级画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/student-portrait', query: {id: path}}">我的画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/student-details', query: {id: path}}">评价详情</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/self', query: {id: path}}">自我评价</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/classmate', query: {id: path}}" v-if="evaluateName.includes($g.user_id+'')">评价同学</router-link>
			</template>
			<!-- 家长 -->
			<template v-else-if="roleBaseid(5)">
				<router-link  class="fade-router" :to="{path: '/class/quality/index', query: {id: path}}">班级画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/student-portrait', query: {id: path}}">孩子画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/student-details', query: {id: path}}">评价详情</router-link>
			</template>
			<!-- 任课老师 -->
			<template v-else-if="roleBaseid(6)">
				<router-link  class="fade-router" :to="{path: '/class/quality/index', query: {id: path}}">班级画像</router-link>
				<router-link  class="fade-router" :to="{path: '/class/quality/students', query: {id: path}}">评价学生</router-link>
			</template>
		</div>

		<div class="quality-seleter">
			<span>学期：</span>
			<el-select v-model="semester" clearable  placeholder="请选择" @change="changeQuality">
			   <el-option  
			     v-for="(item, index) in SemesterList"
			     :key="index"
			     :label="item.name"
			     :value="item.id">
			   </el-option>
			 </el-select>
		</div>

		<div  v-loading="loading"
		element-loading-text="拼命加载中">
			
		
			<div class="quality-statistics">
				<div class="quality-title"><i class="iq q-1"></i><span>班级一级指标平均分统计</span></div>
				<div class="dependent" v-if="placeholder1">
					<i class="ipm image_nofound"></i>
					<p>
						还没发现任何相关的内容哦~
					</p>
				</div>
				<div class="IEcharts" v-else>
					<div class="quality-echart">
						<IEcharts id="echart" ref="echart"  :option="options" :resizable="true"  @ready="onReady" />
					</div>
					<div class="quality-speed">
						<ul>
							<li v-for="(item, index) of firstDimensions">
								<span>{{item.title}}</span>
								<el-progress :percentage="item.all_score"></el-progress>
								<i>{{item.all_score.toFixed(1)}}</i>
							</li>
						</ul>
						
					</div>
				</div>
				
				
			</div>


			<div class="quality-statistics">
				<div class="quality-title"><i class="iq q-2"></i><span>班级二级指标平均分统计</span></div>
				<div class="dependent" v-if="placeholder2">
					<i class="ipm image_nofound"></i>
					<p>
						还没发现任何相关的内容哦~
					</p>
				</div>
				<div class="IEcharts2" v-else>
					<IEcharts id="echart2" ref="echart2"  :option="option2" :resizable="true" @ready="onReady" />
				</div>
				
				
			</div>

			<div class="quality-statistics">
				<div class="quality-title"><i class="iq q-3"></i><span>班级成绩等级统计</span></div>
				<div class="dependent" v-if="placeholder3">
					<i class="ipm image_nofound"></i>
					<p>
						还没发现任何相关的内容哦~
					</p>
				</div>
				<div class="IEcharts2" v-else>
					<IEcharts id="echart3" ref="echart3"  :option="option3" :resizable="true" @ready="onReady" />
				</div>
				
				
			</div>

			<div class="quality-statistics" >
				<div class="quality-title"><i class="iq q-4"></i><span>班级评语词云</span></div>
				<div class="IEcharts">
					<IEcharts id="echart4" ref="echart4"  :option="option4"/>
				</div>
				
			</div>
		</div>

	</div>
</template>

<script>
	var labels = ['道德品质', '审美与表现', '运动与健康', '交流合作与实践创新', '学习能力', '公民素养'];
	import IEcharts from 'vue-echarts-v3/src/full.js';
	import 'echarts-wordcloud';
	export default{
		components: {IEcharts },
		data(){
			return{
				number:'',
				evaluateName: '',
				loading: true,
				path: this.$route.query.id,
				semester: '',
				placeholder1: false,
				placeholder2: false,
				placeholder3: false,
				firstDimensions: [],
				SemesterList: [],
				options: {
				    tooltip: {
				    	formatter: ''
				       /* 
				       formatter: function(params) {
				            var results = '';
				            for (var i = 0; i < labels.length; i++) {
				                results += labels[i] + ':' + params.value[i] + '%<br>';
				                console.log(params.value[i])
				            }
				            return results;
				        }*/
				    },
				    radar: {
				        splitArea: {
				            show: false
				        },
				        name: {
				            textStyle: {
				                color: '#000',
				            }
				        },
				        indicator: [
				        	{
				                name: '道德品质',
				                max: 100
				            },
				            {
				                name: '审美与表现',
				                max: 100
				            },
				            {
				                name: '运动与健康',
				                max: 100
				            },
				            {
				                name: '交流合作与实践创新',
				                max: 100
				            },
				            {
				                name: '学习能力',
				                max: 100
				            },
				            {
				                name: '公民素养',
				                max: 100
				            },
				        ]
				    },
				    series: [{
				    	name: '预算 vs 开销（Budget vs spending）',
				    	type: 'radar',
				    	symbol: 'none',
				    	areaStyle:{
				    		normal:{
				    			opacity: .5,
				    			color: 'rgba(13, 178, 255, 0.5)',

				    		},
				    	},
				    	lineStyle: {
				    		normal: {
				    			color: 'rgba(13, 178, 255, 1)',
				    			width: 1
				    		}
				    	},
				    	itemStyle: {
				    		normal: {
				    			lineStyle: {
				    				width: 1,
				    			},
				    		},
				    		emphasis: {
				    			areaStyle: {
				    				opacity: .3
				    			}
				    		},
				    	},
				    	data : [
				    	{
				    		value : [28, 28, 28, 28, 28, 14],
				    		name : '预算分配'
				    	}
				    	]
				    }],
				},

				option2: {

				    tooltip: {
				        trigger: 'axis'
				    },

				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    toolbox: {
				        feature: {
				            saveAsImage: {}
				        }
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: [],
				        splitLine: { //设置X轴的网格
				            show: true,
				            interval: 'auto'
				        },
				        axisLine: { //设置X轴的颜色
				            lineStyle: {
				                color: '#989A9C'
				            }
				        },
				        splitLine: {
				        	show: false
				        },
				        "axisLabel": {
				        	"interval": 0,

				        },
				    },
				    yAxis: {
				           type: 'value',
				           splitLine: {
				               lineStyle: {
				                   type: 'dashed',
				                   color: '#ddd'
				               }
				           },
				           axisLine: {
				               show: false
				           },
				           axisLabel: {
				               // color: yAxisAxisLabelColor
				           },
				           axisTick: {
				               show: false
				           },
				           splitArea: {
				               show: false
				           }
				       },
				    "dataZoom": [{
				            "show": true,
				            "height": 10,
				            "xAxisIndex": [
				                0
				            ],
				            bottom: '0',
				            "start": 0,
				            "end": 30,
				            handleSize: '110%',
				            handleStyle:{
				                color:"#F9F9F9",
				            },
				               textStyle:{ color:"#000"},
				               borderColor:"#0000",
				               backgroundColor: '#F9F9F9',
				        }, {
				            "type": "inside",
				            "show": true,
				            "height": 15,
				            "start": 1,
				            "end": 35
				        }],
				    series: [{
				        name: '',
				        type: 'line',
				        stack: '总量',
				        smooth: true, //点与点之间的幅度,false为直线
				        symbol: 'circle',
				        symbolSize: 5,
				        showSymbol: true,   //是否显示点数据的圆点
				        itemStyle: {    //设置折线的border颜色
				            normal: {
				                color: 'rgb(7, 171, 228)',
				                borderColor: 'rgba(7, 171, 228, .2)',
				                borderWidth: 10
				            }
				        },
				        label: { //设置点数据的提示
				            normal: {
				                show: true,
				                position: 'top'
				            }
				        },
				        "areaStyle": {
				                   "normal": {
				                       "color": {
				                           "type": "linear",
				                           "x": 0,
				                           "y": 0,
				                           "x2": 0,
				                           "y2": 1,
				                           "colorStops": [{
				                                   "offset": 0,
				                                   "color": "rgba(7, 171, 228, 0.3)"
				                               },
				                               {
				                                   "offset": 1,
				                                   "color": "rgba(7, 171, 228, 0.1)"
				                               }
				                           ],
				                           "globalCoord": false
				                       }
				                   }
				               },
				        data: [],
				        markPoint: { //设置最大值和最小值
				            data: [{
				                type: 'max',
				                name: '最大值'
				            }, {
				                type: 'min',
				                name: '最小值'
				            }]
				        }

				    }]
				},

				option3: {
				    tooltip: {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				     legend: { //图例组件，颜色和名字
				        right: '5%',
				        top: '43%',
				        orient: 'pie',
				        itemWidth: 12,
				        itemHeight: 12,
				        icon: 'circle',
				        data: ['优秀', '良好', '及格', '不及格'],
				        textStyle: {
				            fontStyle: 'normal',
				            fontSize: 12,
				        }
				    },
				    series: [{
				        name: '班级成绩等级统计',
				        type: 'pie',
				        radius: '68%',
				        center: ['50%', '50%'],
				        clockwise: false,
				        data: [{
				            value: 45,
				            name: '优秀'
				        }, {
				            value: 25,
				            name: '良好'
				        }, {
				            value: 15,
				            name: '及格'
				        }, {
				            value: 8,
				            name: '不及格'
				        }],
				        label: {
				            normal: {
				                textStyle: {
				                    color: '#999',
				                    fontSize: 14,
				                }
				            }
				        },
				        labelLine: {
				            normal: {
				                show: false
				            }
				        },
				        itemStyle: {
				            normal: {
				                borderWidth: 0,
				                borderColor: '#ffffff',
				            },
				            emphasis: {
				                borderWidth: 0,
				                shadowBlur: 10,
				                shadowOffsetX: 0,
				                shadowColor: 'rgba(0, 0, 0, 0.5)'
				            }
				        }
				    }],
				    color: [
				        '#5D6DFF',
				        '#409BFF',
				        '#69D3FF',
				        '#97F0FF ',
				    ],
				    backgroundColor: '#fff'
				},

				option4: {
				    series: [{
				        type: 'wordCloud',
				        gridSize: 20,
				        sizeRange: [12, 50,30],
				        rotationRange: [0, 0],
				        shape: 'circle',
				        textStyle: {
				            normal: {
				                color: function() {
				                    return 'rgb(' + [
				                        Math.round(Math.random() * 160),
				                        Math.round(Math.random() * 160),
				                        Math.round(Math.random() * 160)
				                    ].join(',') + ')';
				                }
				            },
				            emphasis: {
				                shadowBlur: 10,
				                shadowColor: '#333'
				            }
				        },
				        data: []
				    }]
				},

			}
		},
		watch: {
			'$store.state.changData': {
				handler(val, newval){
					this.path = sessionStorage.getItem('classId')
					this.getSemester()
					
					
				},
				immediate: true
			}
		},
		created(){
		
		},
		methods: {
			/**
			 * 获取素质评价词云数据
			 * @DateTime 2020-03-02T10:44:16+0800
			 * @return   {[type]}                 [description]
			 */
			getWordCloud(){
				let success = (res=>{
					this.option4.series[0].data = []
					this.option4.series[0].sizeRange = []
					res.data.forEach((item, index)=>{
						this.option4.series[0].data.push({
							name: item.word,
							value:item.times * 1000
						})

						this.option4.series[0].sizeRange.push(item.weight.toFixed(1) * 5)
					})

				});

				let params = {
					class_id: this.path,//班级id
					term_id: this.semester,//学期id
					// quality_id: ,//素质评价id
					// user_id: , //被评论的id
					// create_id: ''//发出评价的人的id
					// teacher_or_student_or_me: 1,//1教师评语 2学生评语 3自己评语

				};

				this.$ajax({
					url: 'api/quality/get_quality_comment_data',
					method: 'get',
					params: params,
					func: {success: success}
				})
			},
	
			onReady(instance) {
				// console.log(instance);
			},
			changeQuality(val){
				this.semester = val
				this.getQuality()
			},
			//请求学期数据
			getSemester(){
				let success = (res=>{

					this.SemesterList = res.data;
					this.semester = res.data.length > 0 ? res.data[0].id : '';
					for (var i = 0; i < this.SemesterList.length; i++) {
						if (this.SemesterList[i].semester == 1) {
							this.SemesterList[i].name = this.SemesterList[i].start_year +'-'+ this.SemesterList[i].end_year + '学年 第一学期'
						}else{
							this.SemesterList[i].name = this.SemesterList[i].start_year +'-'+ this.SemesterList[i].end_year + '学年 第二学期'
						}
					}

					this.getQuality()
					this.getWordCloud()
				});

				let params = {
					now_term: 1
				};

				this.$ajax({
					url: 'api/quality/get_term',
					method: 'get',
					params: params,
					func: {success: success}
				})
			},
			/*
				获取素质评价
			*/
			getQuality(){

				let success = (res=>{
					this.statistics = res.data[0]


					if ( res.data.length != 0  ) {
						this.placeholder1 = false
						this.placeholder2 = false
						this.placeholder3 = false

						this.evaluateName = this.statistics.student.split(',')
						sessionStorage.setItem('evaluate', this.statistics.student)
						/*一级指标的单数数据*/
						this.firstDimensions = this.statistics.first_dimensions

						/*一级指标的数据赋值*/
						this.options.radar.indicator = []
						this.options.series[0].data[0].value = []

						for (let i = 0; i < this.statistics.first_dimensions.length; i++) {
							
							this.options.radar.indicator.push({
								name: this.statistics.first_dimensions[i].title,
								max: this.statistics.first_dimensions[i].quality_index_all_score
							})
	
							let number = this.statistics.first_dimensions[i].all_score.toFixed(1)
							this.options.series[0].data[0].value.push(number);
							
						}



						this.options.tooltip.formatter = (params)=>{

							var results = '';
							for (var i = 0; i < this.options.radar.indicator.length; i++) {
								
							    results += this.options.radar.indicator[i].name + ':' + (params.value[i] / this.options.radar.indicator[i].max)*100+ '%<br>';
							}
							return results;
						}

						/*二级指标的数据赋值*/
						for (let j = 0; j < this.statistics.second_dimensions.length; j++) {
							this.option2.xAxis.data.push(this.statistics.second_dimensions[j].title)
							let number = this.statistics.second_dimensions[j].all_score.toFixed(1)
							this.option2.series[0].data.push(number)
						}



						/*三级指标的数据赋值*/
						this.option3.series[0].data = []
						for (let i = 0; i < this.statistics.percentage.length; i++) {
							
							this.option3.series[0].data.push({
								name: this.statistics.percentage[i].title,
								value: (this.statistics.percentage[i].content * 10)
							})
						}
			


					}else{
						this.placeholder1 = true
						this.placeholder2 = true
						this.placeholder3 = true
						this.firstDimensions = []
						this.option2.xAxis.data = []
						this.option2.series[0].data = []
					}

					this.loading = false

				});

				let params = {
					term_id: this.semester,//学期id
					class_id: this.path, //班级id
					// user_id: ''//被评价人id
				};

				this.$ajax({
					url: 'api/quality/quality',
					method: 'get',
					params: params,
					func: {success: success}
				})
			},
		}
	}
</script>